layui.config({
    version: '1606406696877' //为了更新 js 缓存，可忽略
});

layui.use(['laypage', 'layer', 'table', 'element', 'laydate', 'layer', 'form'], function () {
    let laypage = layui.laypage //分页
        , layer = layui.layer //弹层
        , table = layui.table //表格
        , element = layui.element //元素操作
        , laydate = layui.laydate //日期选择
        , form = layui.form // 表单元素

    // 加载
    // layer.load(3, {time: 500}); // 数据表格自带就不用了

    //执行一个 table 实例
    table.render({
        elem: '#userList'
        , url: '/user/all' //数据接口
        , request: {
            pageName: 'page' //页码的参数名称，默认：page
            , limitName: 'limit' //每页数据量的参数名，默认：limit
        }
        , title: '用户表'
        , page: {
            limit: 8,
            limits: [4, 6, 8]
        } //开启分页
        , toolbar: '#headerBar' //开启工具栏（头部）
        , cols: [
            [ //表头
                {type: 'numbers', title: '序号', width: 60, align: 'center'}
                , {field: 'id', title: "ID", width: 80, align: 'center'}
                , {field: 'username', title: '用户名', align: 'center'}
                , {field: 'gender', title: '性别', width: 70, templet: '#genderTpl', align: 'center'}
                , {field: 'email', title: '邮箱', align: 'center'}
                , {
                field: 'updateTime', title: '最后一次操作时间', align: 'center', width: 170,
                templet: "<div>{{layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
            }
                , {
                field: 'registerTime', title: '注册时间', align: 'center', width: 170,
                templet: "<div>{{layui.util.toDateString(d.registerTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
            }
                , {field: 'valid', title: '状态', width: 140, align: "center", templet: '#validTpl'}
                , {title: '操作', toolbar: '#userListBar', align: 'center'}
            ]
        ]
        , parseData: function (res) {
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": res.data //解析数据列表
            };
        },
    });


    /**
     * 监听头工具栏
     */
    table.on('toolbar(userTable)', function (obj) {
        switch (obj.event) {
            case 'refresh':
                table.reload('userList', {
                    url: '/user/all', //数据接口
                    request: {
                        pageName: 'page' //页码的参数名称，默认：page
                        , limitName: 'limit' //每页数据量的参数名，默认：limit
                    }
                    , page: { //开启分页
                        curr: 1,
                        limit: 8,
                        limits: [4, 6, 8]
                    }
                })
                break;
        }
    })

    //监听头工具栏事件（这是default状态的头工具）
    // table.on('toolbar(userTable)', function (obj) {
    //     let checkStatus = table.checkStatus(obj.config.id)
    //         , data = checkStatus.data; //获取选中的数据
    //     switch (obj.event) {
    //         case 'add':
    //             window.open("/register");
    //             break;
    //         case 'update':
    //             if (data.length === 0) {
    //                 layer.msg('请选择一行');
    //             } else if (data.length > 1) {
    //                 layer.msg('只能同时编辑一个');
    //             } else {
    //                 layer.open({
    //                     type: 2,    // 表示iframe层
    //                     title: '修改用户密码',    // 窗口标题
    //                     maxmin: true,
    //                     shadeClose: true, //点击遮罩关闭层
    //                     area : ['430px' , '520px'], // 窗口大小
    //                     content: '/admin/userPassEdit' + '?user=' + escape(JSON.stringify(data))    // 内容
    //                 });
    //             }
    //             break;
    //         case 'delete':
    //             if (data.length === 0) {
    //                 layer.msg('请选择一行');
    //             } else {
    //                 layer.msg('不允许删除用户！', {icon: 2, time: 900});
    //             }
    //             break;
    //     }
    // });

    //监听行工具事件
    table.on('tool(userTable)', function (obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
        let data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'detail') {
            layer.open({
                type: 2,
                title: "查看用户信息",
                maxmin: true,
                area: ['430px', '520px'], // 窗口大小
                content: '/admin/userInfo' + '?user=' + escape(JSON.stringify(data)),
                btn: ["关闭"]
            })
        }
        // 禁用用户
        else if (layEvent === 'del' || layEvent === 'act') {
            changeValid(data);
            // 刷新页面
            // location.reload();
        } else if (layEvent === 'edit') {
            layer.open({
                type: 2,    // 表示iframe层
                title: '修改用户密码',    // 窗口标题
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area: ['430px', '520px'], // 窗口大小
                content: '/admin/userPassEdit' + '?user=' + escape(JSON.stringify(data))    // 内容
            });
        }
    });

    laydate.render({
        elem: '#dateRange',
        range: true
    })

    // 监听行、工具栏 启用/禁用事件
    function changeValid(obj) {
        // 异或：相同为0，不同为1（0表示禁用，1表示启用）
        let valid = 1 ^ obj.valid;
        let data = {"valid": valid, "id": obj.id};
        // 提示
        let tip = (valid === 1) ? '激活' : '禁用';
        layer.confirm('您将<span style="color: red">' + tip + '</span>ID为' + obj.id + '的用户，是否操作？', {icon: 3, title: '提示'},
            function (index) {
                $.ajax({
                    url: "/admin/userValid",
                    type: "post",
                    data: JSON.stringify(data),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (res) {
                        if (res !== 0) {
                            layer.msg('操作成功！', {icon: 1, time: 1300}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg('操作失败！', {icon: 0, time: 1600});
                        }
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    },
                    error: function () {
                        layer.msg("服务器开小差了……", {icon: 2, anim: 6});
                    }
                })
            layer.close(index);
        });
    }


    // 点击搜索按钮事件
    $("#searchBtn").on("click", function () {
        let keyword = $("#keyword").val();
        let gender = $("#gender").val();
        let dateRange = $("#dateRange").val();
        console.log("keyword:" + keyword + "\ngender:" + gender + "\ndateRange:" + dateRange);
        let flag1 = keyword == null || keyword === "";
        let flag2 = gender == null || gender === "";
        let flag3 = dateRange == null || dateRange === "";

        // 只有全部为空时才提示用户（至少有一个条件查询）
        if (flag1 && flag2 && flag3) {
            layer.msg('至少有一个条件不为空！', {icon: 0});
            return;
        }

        let req = {};
        req.keyword = keyword;
        req.gender = gender;
        req.dateRange = dateRange

        // 表格重载
        table.reload('userList', {
            url: "/user/all",
            method: "post",
            contentType: "application/json",
            where: req, // req是JSON数据
            request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'limit' //每页数据量的参数名，默认：limit
            }
            , page: {
                curr: 1,
                limit: 8,
                limits: [4, 6, 8]
            } //开启分页
        })
    });

});


